<template>
  <view>
    <view
      v-for="(item, index) in news"
      :key="index"
      @click="goWebPage(item.link)"
    >
      <view class="container">
        <view class="top-area">
          <view class="top-tag">置顶</view>
          <view class="public">本站发布</view>
          <view>{{ item.author }}</view>
          <view class="date">{{ item.niceDate }}</view>
        </view>
        <view class="title">{{ item.title }}</view>
        <view class="bottom-area">
          <view>{{ item.chapterName }}/{{ item.superChapterName }}</view>
          <view class="collect-img" @click.stop="collect(item.id, index)">
            <image
              class="icon-collect"
              :src="
                item.collect == true
                  ? 'https://www.wanandroid.com/resources/image/pc/collect_icon_hover.svg'
                  : 'https://www.wanandroid.com/resources/image/pc/collect_icon.svg'
              "
            ></image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "askItem",
  props: {
    news: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    collect(id, index) {
      this.$emit("collectDo", id, index);
    },
    goWebPage(link) {
      this.$emit("goPage", link);
    },
  },
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  padding: 32rpx;
  flex-direction: column;

  margin-bottom: 16rpx;
  border-bottom: 1px solid green;
  .bottom-area {
    display: flex;
    .collect-img {
      margin-left: auto;
      .icon-collect {
        width: 40rpx;
        height: 40rpx;
      }
    }
  }
  .title {
    font-weight: 500;
    color: black;
    font-size: 32rpx;
    margin: 0 0 32rpx;
  }
  .top-area {
    display: flex;
    position: relative;
    align-items: center;
    height: 100rpx;
    .date {
      position: absolute;
      right: 0;
      top: 0;
      height: 100rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .top-tag {
      border: 1rpx solid red;
      border-radius: 10rpx;
      padding: 3rpx;
      color: red;
      padding: 6rpx;
    }
    .public {
      color: green;
      margin: 0rpx 16rpx;
      border: 1rpx solid green;
      border-radius: 10rpx;
      text-align: center;
      padding: 5rpx;
    }
  }
}
</style>
